<script setup lang="ts">


import SvgIcon from "@/components/SvgIcon/index.vue";

const $router = useRouter()
const props = defineProps<{
  article: any
}>()

const handleShowArticle = () => {
  // 跳转文章详情页
  $router.push({path: `/article/details/${props.article.artId}`})
}

function onImageError(event) {
  // event.target.src = ErrorPic; // 设置为备用图片
}
</script>

<template>
  <div class="card-content-item box-shadow-card">
    <div class="card-content-item-img" @click="handleShowArticle">
      <img :src="article.artCoverUrl" @error="onImageError" alt=""/>
    </div>
    <div class="card-content-item-other">
      <p class="other-publish"><SvgIcon icon-class="blog-date"></SvgIcon>&nbsp;{{ article.publishTime }}</p>
      <p class="other-title">{{ article.artTitle }}</p>
      <p class="other-comment-like">
        <SvgIcon icon-class="blog-comment"></SvgIcon>&nbsp;{{ article.commentCount }}条评论&nbsp;&nbsp;
        <SvgIcon icon-class="blog-like"></SvgIcon>&nbsp;{{ article.likeCount }} 点赞
      </p>
      <p class="other-tag ellipsis-one-line">
        <span class="other-tag-item">
          <SvgIcon icon-class="blog-live"></SvgIcon>&nbsp;生活倒影
        </span>
        <span class="other-tag-item">
          <SvgIcon icon-class="blog-comment"></SvgIcon>&nbsp;生活倒影
        </span>
      </p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.card-content-item {
  height: 260px;

  .card-content-item-img {
    width: 100%;
    height: 160px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      transition: all .6s;

      &:hover {
        //filter: blur(2px);
        /*放大图片*/
        transform: scale(1.1);
        cursor: pointer;
      }
    }
  }

  .card-content-item-other {
    display: flex;
    flex-direction: column;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #A0A0A0;
    cursor: pointer;

    .other-publish {
      display: flex;
      align-items: center;
      font-size: 12px;
    }

    .other-title {
      /*一行展示，展示不完用 ...*/
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 8px 0;
      font: bold 18px "STXinwei";
      color: black;
    }

    .article.artTitle {
      position: absolute;
    }

    .other-comment-like {
      display: flex;
      align-items: center;
      font-size: 12px;
    }

    .other-tag {
      .other-tag-item {
        display: inline-flex;
        align-items: center;
        padding: 0 4px;
        border-radius: 4px;
        background-color: #EFF0F3;
        font-size: 12px;
        margin-right: 10px;
      }
    }
  }
}
</style>
